<template>
	<u-popup
		:show="showPopup"
		closeOnClickOverlay
		overlay
		round='10'
		closeable
		@close="showPopup=false"
		mode="bottom"
	>
	<view  style="margin: 0rpx;padding:1rpx" @touchmove.stop.prevent="() => {}">
		<view 
			style="text-align: center;padding: 20rpx;font-weight: bold;display:flex;justify-content: center;position:relative"
		>
			<view>
				完工验收
			</view>
		</view>
		
		<u-tabs :list="tabs" @click="item=>currentSwiperItem=item.index" :current="currentSwiperItem"></u-tabs>
		<swiper @touchmove.stop.prevent="() => {}" style="height: 1340rpx;" :current="currentSwiperItem" disable-touch="true" circular :indicator-dots="false" :autoplay="false" easing-function="easeInCubic" :duration="300">
				<swiper-item style="padding: 0;">
						<view style="padding-bottom: 50rpx;">
							<!-- 滚动视窗 -->
							<scroll-view scroll-y style="height: 1200rpx;">
								<view style="margin:15px 10px;">
									<view @click="selectAll(doneEnrolls,doneSelecteds)" style="left:0;padding:5px 20px;border:solid 1rpx #eeeeee;border-radius: 4px;display: inline">
										全选
									</view>
								</view>
								<!-- 兼职卡片 -->
								<view v-for="(enroll,index) in doneEnrolls" style="box-shadow: 0px 0px 10px 0px #66666645;border-radius:10rpx;display: flex;flex-direction:column;margin:15rpx;">
									<view style="flex: 1;display: flex;justify-content: space-between;padding: 20rpx;">
										<view style="flex: 1;display: flex;justify-content: space-between;align-items: center;">
											<u-avatar :src="absUrl(enroll.enroller.head_icon_url)" size="40" fontSize="34"></u-avatar>
											<view style="margin-left: 20rpx;">
													<view style="display: flex;flex-direction: column;font-size: 14px;justify-content: space-between;color: #363636;">
														<view style="display: flex;align-items: center;padding: 20rpx 0;">
															<view style="margin: 2px;color: #888;">工时:</view>
															<view style="font-weight: bold;font-size: 18px;">8.5</view>
															<view>小时</view>
														</view>
													</view>
											</view>
											<view style="margin-left: 20rpx;border-right: solid 1px #eee;height: 100%;"></view>
											<view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
												<view style="color: #888;">
													结算工资
												</view>
												<view style="font-weight: bold;font-size: 18px;padding: 20rpx 0;display: flex;align-items: center;">
													<!-- 修改按钮 -->
													<view v-if="!isSelected(doneSelecteds,enroll) &&  doneEditingIndex!=index"  @click="doneEditingIndex=index"
													 style="border:solid 1rpx #cccccc;border-radius: 3px;padding:0 3px;margin:0 3px">
														<i class="iconfont icon-editor" style="width:25px;height:25px"/>
													</view>
													
													<u-input v-if="doneEditingIndex==index" :maxlength="3" :auto-blur="true" :focus="true" type="number"  :auto-focus="true"  v-model="_input" 
													@blur="doneEditingIndex=-1,jobById(enroll.expected_job_id).price=_input,_input=''"
													@focus="_input=jobById(enroll.expected_job_id).price"
													style="font-size:20px;width: 30px;text-align: center;padding:0" />
													<span v-if="doneEditingIndex!=index" style="align-self: flex-end;font-size:20px">{{jobById(enroll.expected_job_id).price }}/</span>
													<span>元/{{jobById(enroll.expected_job_id).price_type}}/</span>
													<span>{{jobById(enroll.expected_job_id).settle_type}}</span>
												</view>
											</view>
										</view>
									
										<view @click="select(doneSelecteds,enroll)" style="display:flex;align-items:center">
											<!-- 选择按钮 -->
											<view  style="position: relative;border-radius: 100px;width: 40rpx;height: 40rpx;align-self: center;box-shadow: 0px 0px 6px 0px #66666665;" 
												:style="{
													border: isSelected(doneSelecteds,enroll)?'none' : 'solid 1rpx #eee',
													backgroundColor: isSelected(doneSelecteds,enroll) ? 'blueviolet' : 'transparent'
												}"
											>
												
												<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
													<u-icon name="checkmark" color="white"></u-icon>
												</view>
											</view>
										</view>
					<!-- 					<view @click="()=>state(enroll).click?state(enroll).click(enroll):null" style="display: flex;align-items: center;justify-content: center;">
											<view style="display: flex;align-items: center;border-radius: 10rpx;"
												:class="state(enroll).cls"
											>
												<i v-if="state(enroll).iconCls" :class="state(enroll).iconCls" class="iconfont" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
												<span style="font-size: 26rpx;font-weight: bold;">{{state(enroll).text}}</span>
											</view>
										</view>	 -->
									</view>
									<view style="flex: 1;border-top: solid 1rpx #eee;padding: 20rpx;display: flex;align-items: center;">
										<view style="margin: 2px;display: flex;padding: 0 30rpx;">
											<text style="padding-right: 10rpx;font-size: 16px;">{{enroll.enroller.name}}</text>
										</view>
										<view style="flex: 1;display: flex;justify-content: center;color: #888;font-size: 13px;">
											验收时间: {{$dayjs(enroll.verified_at).format('YYYY-MM-DD HH:mm:ss')}}
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						
						<view
							style="
								position: absolute;
								bottom: 0;
								right: 0;
								left: 0;
								display: flex;
								"
						>
							<view
							  @click="showVerifyModal=true"
							  class="cu-btn block lg"
							  style="
							  flex: 1;
								background-color: blueviolet;
								border-radius: 10rpx;
								color: white;
								font-weight: bold;
								text-align: center;
								padding: 20rpx;
								margin: 20rpx;
							">
								取消验收
							</view>
						</view>
						
						<u-modal 
							:show="showVerifyModal" 
							:showCancelButton="true" 
							title="操作确认" 
							content='是否取消验收'
							@confirm="showVerifyModal=false,commit(doneSelecteds,true)"
							@cancel="showVerifyModal=false"
						></u-modal>
				</swiper-item>
				
				<swiper-item style="padding: 0;">
					<view style="padding-bottom: 50rpx;">
						<scroll-view scroll-y style="max-height: 1200rpx;">
							<view style="margin:15px 10px;">
								<view @click="selectAll(readyEnrolls,readySelecteds)" style="left:0;padding:5px 20px;border:solid 1rpx #eeeeee;border-radius: 4px;display: inline">
									全选
								</view>
							</view>
								
							<!-- 兼职卡片 -待验收 --> 
							<view @click="readyEditingIndex<0?select(readySelecteds,enroll):null" v-for="(enroll,index) in readyEnrolls" style="box-shadow: 0px 0px 10px 0px #66666645;border-radius:10rpx;display: flex;flex-direction:column;margin:15rpx;">
								<view style="flex: 1;display: flex;justify-content: space-between;padding: 20rpx;">
									<view style="flex: 1;display: flex;justify-content: space-between;align-items: center;">
										<u-avatar :src="absUrl(enroll.enroller.head_icon_url)" size="40" fontSize="34"></u-avatar>
										<view style="margin-left: 20rpx;">
												<view style="display: flex;flex-direction: column;font-size: 14px;justify-content: space-between;color: #363636;">
													<view style="display: flex;align-items: center;padding: 20rpx 0;">
														<view style="margin: 2px;color: #888;">工时:</view>
														<view style="font-weight: bold;font-size: 18px;">8.5</view>
														<view>小时</view>
													</view>
												</view>
										</view>
										<view style="margin-left: 20px;border-right: solid 1px #eee;height: 100%;"></view>
										<view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
											<view style="color: #888;">
												结算工资
											</view>
											<view style="font-weight: bold;font-size: 18px;padding: 20rpx 0;display: flex;align-items: center;">
												<!-- 修改按钮 -->
												<view v-if="!isSelected(readySelecteds,enroll) &&  readyEditingIndex!=index"  
													@click="readyEditingIndex=index"
													@click.stop.prevent="() => {}"
													 style="border:solid 1rpx #cccccc;border-radius: 3px;padding:0 3px;margin:0 3px">
													<i class="iconfont icon-editor" style="width:25px;height:25px"/>
												</view>
												
												<u-input v-if="readyEditingIndex==index" :maxlength="3" :auto-blur="true" :focus="true" type="number"  :auto-focus="true"  v-model="_input" 
													@blur="readyEditingIndex=-1,jobById(enroll.expected_job_id).price=_input,_input=''"
													@focus="_input=jobById(enroll.expected_job_id).price"
													style="font-size:20px;width: 30px;text-align: center;padding:0" 
												/>
												<span v-if="readyEditingIndex!=index" style="align-self: flex-end;font-size:20px">{{jobById(enroll.expected_job_id).price }}/</span>
												<span>元/{{jobById(enroll.expected_job_id).price_type}}/</span>
												<span>{{jobById(enroll.expected_job_id).settle_type}}</span>
											</view>
										</view>
									</view>
								
									<!-- 选择按钮 -->
									<view style="position: relative;border-radius: 100px;width: 40rpx;height: 40rpx;align-self: center;box-shadow: 0px 0px 6px 0px #66666665;" 
										:style="{
											border: isSelected(readySelecteds,enroll)?'none' : 'solid 1rpx #eee',
											backgroundColor: isSelected(readySelecteds,enroll) ? 'blueviolet' : 'transparent'
										}"
									>
										
										<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;justify-content: center;">
											<u-icon name="checkmark" color="white"></u-icon>
										</view>
									</view>
				<!-- 					<view @click="()=>state(enroll).click?state(enroll).click(enroll):null" style="display: flex;align-items: center;justify-content: center;">
										<view style="display: flex;align-items: center;border-radius: 10rpx;"
											:class="state(enroll).cls"
										>
											<i v-if="state(enroll).iconCls" :class="state(enroll).iconCls" class="iconfont" style="width: 30rpx;height:30rpx;margin-right: 5rpx;"></i>
											<span style="font-size: 26rpx;font-weight: bold;">{{state(enroll).text}}</span>
										</view>
									</view>	 -->
								</view>
								<view style="flex: 1;border-top: solid 1rpx #eee;padding: 20rpx;display: flex;align-items: center;">
									<view style="margin: 2px;display: flex;padding: 0 30rpx;">
										<text style="padding-right: 10rpx;font-size: 16px;">{{enroll.enroller.name}}</text>
									</view>
<!-- 									<view style="flex: 1;display: flex;justify-content: center;color: #888;font-size: 13px;">
										考勤时间:{{$dayjs(enroll.updated_at).format('YYYY-MM-DD HH:mm:ss')}}
									</view> -->
								</view>
							</view>
						</scroll-view>
					</view>
					
					<view :disabled="readySelecteds.length > 0"
						style="
							position: absolute;
							bottom: 0;
							right: 0;
							left: 0;
							display: flex;
							"
					>
						<view
							style="
								position: absolute;
								bottom: 0;
								right: 0;
								left: 0;
								"
						>
							<button 
								:disabled="readySelecteds.length == 0" 
								@click="showReadyModal=true" class="cu-btn block lg"
								style="
								  flex: 1;
									background-color: blueviolet;
									color: white;
									font-weight: bold;
									margin: 20rpx;
								">
								批量验收
							</button>
						</view>
					</view>
					
					<u-modal
						:show="showReadyModal" 
						:showCancelButton="true" 
						title="操作确认" 
						content='是否确认验收'
						@confirm="showReadyModal=false,commit(readySelecteds)"
						@cancel="showReadyModal=false"
					></u-modal>
				</swiper-item>
			</swiper>
	</view>
	</u-popup>
</template>

<script>
	import memberManager from './member-manager.js'
	
	export default {
		mixins:[memberManager],
		inject:['task'],
		data() {
			return {
				showVerifyModal:false,
				showReadyModal:false,
				showPopup:false,
				currentSwiperItem:0,
				
				_input:'16', 
				readyEditingIndex:-1,
				doneEditingIndex:-1,
				//task.enrolls:[],
				//selecteds:[],
				tabs:[
					{
						name: '已验收',
					},
					{
						name: '待验收',
					}
				]
			}
		},
		computed:{
			readyEnrolls() {
				return this.enrollsForReady(this.task.enrolls,4)
			},
			doneEnrolls() {  
				return this.enrollsForReady(this.task.enrolls,5).reverse()
			},
			jobById(){
				return (job_id)=>{
					return this.task.jobs.find(job=>job.id == job_id)
				}
			},
			state()
			{
				return (enroll)=>{
					let index = this.stateCode(enroll)
					let config = [
						{
							iconCls:'icon-tianxin_jianzhi_queren',
							cls:'state_ok',
							text:'已通过',
							click:null
						},
						{
							iconCls:null,
							cls:'state_raw',
							text:'同意',
							click:this.confirm
						},
						{
							iconCls:'icon-tianxin_jianzhi_yiyi',
							cls:'state_reject',
							text:'已拒绝',
							click:null
						},
					]
					
					return config[index]
				}
			}
		}, 
		methods:{
			async commit(selecteds,isCancel=false){
				console.log(isCancel)
				console.log(selecteds)
				
				var roles = selecteds.map(id=>{
					var enroll = this.task.enrolls.find(enroll=>enroll.id == id)
					return {id,job_id:enroll.expected_job_id,total:this.jobById(enroll.expected_job_id).price}
				})
				
				// var roles = this.selecteds.map(id=>{
				// 	//var enroll = this._enrolls.find(enroll=>enroll.id == id)
				// 	return id
				// })
				uni.showLoading({
					title:'正在处理'
				})
				 
				let res = await this.$http.post('/manager/job/enrolls/assign',{
					enroll_ids: selecteds,
					type:'verified',
					op:isCancel?'cancel':null
				})
				
				
				this.updateEnrolls(res.data)
				
				uni.showToast({
					title: '处理成功'
				})
				
				setTimeout(() => {
					this.currentSwiperItem = 0
					selecteds.splice(0,selecteds.length)
				}, 500)
			},
			show(){
				this.showPopup = true
				this.currentSwiperItem = 0
				this.readySelecteds = []
				this.doneSelecteds = []
			},
		}
	}
</script>

<style scoped>
	/deep/ .uni-scroll-view {
		/* 在真正的滚动区域设置 阻断滚动穿透 */
		overscroll-behavior-y: contain !important;
	}
</style>